<template>
    <div class="all_box_userCount">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="userCount_path">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>用户统计</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card style="width: 1000px;height:660px;" class="userCount_pic_area">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 800px;height:550px;"></div>
            <div align="center" style="font-size: 20px;" class="userCount_allNum">
              全站注册用户为:
                <!-- <input type="text" :data="total" style="width: 60px; height: 30px; font-size: 20px;" disabled></input> -->
                <input type="text" v-model="total" style="width: 80px; height: 30px; font-size: 20px; text-align: center;" disabled></input>
              人
            </div>
        </el-card>

    </div>

</template>

<script>
    //导入
    import echarts from 'echarts'

    export default {
        data() {
            return {
                loading: false,
                userCount: [],
                total: 0,
            }

        },
        methods: {},
        created() {

        },
        async mounted() {
          const myChart = this.$echarts.init(document.getElementById('main'),{width:'800px',height:'400px'})
            const option = {
              title: {
                  text: '用户注册数量统计表'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross'
                }
              },
              legend: {
                  data: ['用户注册数量']
              },
              xAxis: [
                {
                  type: 'category',
                  data: [
                    '1月',
                    '2月',
                    '3月',
                    '4月',
                    '5月',
                    '6月',
                    '7月',
                    '8月',
                    '9月',
                    '10月',
                    '11月',
                    '12月'
                  ],
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '用户注册数量',
                  interval: 100,
                  axisLabel: {
                    formatter: '{value}'
                  }
                },
              ],
              series: [
                {
                  name: '用户注册数量',
                  type: 'bar',
                  data: [],
                  itemStyle: {
                    normal: {
                      color: '#d0e17d'
                    }
                  }
                },
              ]
            };
            const {data: result} = await this.$http.get('/user/userCount');
              if (result.status !== 200) {
                return this.$message.error("数据统计失败")
              }
              console.log("--------"+result.data)
              this.userCount = result.data
              for (let j = 0; j < this.userCount.length; j++) {
                let mon = this.userCount[j].MONTH
                for (let i = 1; i <= 12; i++) {
                  if(i == mon){
                    option.series[0].data[i-1] = this.userCount[j].num
                  }
                }
                this.total = this.total + this.userCount[j].num
              }
            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option);

        }
    }
</script>

<style lang="less" scoped>
  .all_box_userCount{
    .userCount_path{

    }
    .userCount_pic_area{
      #main{
        // margin-top: 20px;
      }
      .userCount_allNum{
        // margin-top: ;
      }
    }
  }
</style>
